<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="js/httpUtil.js"></script>
    <script src="js/cacheUtil.js"></script>
    <link rel="stylesheet" type="text/css" href="css/base.css">
    <link rel="stylesheet" type="text/css" href="css/register.css">
    <link rel="shortcut icon" href="img/logo.ico"/>
    <link rel="bookmark" href="img/logo.ico" type="image/x-icon"/>
</head>
<body>
<div id="ui">
    <!--logo-->
    <div class="logo" style="text-align: center;margin-bottom: 30px">
        <a href=#>
            <img id="logo_img" src="img/logo.png" width="204px" class="img-rounded">
        </a>
    </div>
    <!-- uiView:  -->
    <div data-ui-view="" class="container">
        <div class="container-fluid full">
            <div class="form col-md-4 col-md-offset-4 ">
                <!--用户名-->
                <div class="form-group">
                    <div class="userMessage">
                        <label for="username">用户名：</label>
                        <input type="text" id="username" name="username" placeholder="用户名" autofocus>
                        <span id="usernameMsg"></span>
                    </div>
                </div>
                <!--密码-->
                <div class="form-group">
                    <div class="userMessage">
                        <label for="password">密&nbsp;&nbsp;&nbsp;&nbsp;码：</label>
                        <input type="text" id="password" name="password" placeholder="密码">
                    </div>
                </div>
                <!--Email-->
                <div class="form-group">
                    <div class="userMessage">
                        <label for="email">邮&nbsp;&nbsp;&nbsp;&nbsp;箱：</label>
                        <input type="text" id="email" name="email" placeholder="邮箱地址">
                    </div>
                </div>
                <!--手机号-->
                <div class="form-group">
                    <div class="userMessage">
                        <label for="phone">手机号：</label>
                        <input type="text" id="phone" name="password" placeholder="手机号">
                    </div>
                </div>
                <!--动态验证码-->
                <div class="form-group">
                    <div class="userMessage">
                        <label for="phoneCode">验证码：</label>
                        <input type="text" id="phoneCode" name="phoneCode" placeholder="验证码">
                        <button id="sendMessage" class="btn">获取验证码</button>
                    </div>
                </div>
                <!--性别-->
                <div class="form-group">
                    <div class="userSex">
                        <label>性&nbsp;&nbsp;&nbsp;&nbsp;别：</label>
                        <span id="sex_box">
                                <label class="radio-inline">
                                    <input name="sex" class="gender" type="radio" id="femaleRadio" value="女"
                                           checked=true/>女
                                </label>
                                <label class="radio-inline">
                                    <input name="sex" class="gender" type="radio" id="maleRadio" value="男"/>男
                                </label>
                            </span>
                    </div>
                </div>
                <!--注册按钮-->
                <div class="form-group">
                    <div class="userMessage">
                        <button id="registerBtn" class="btn btn-success btn-block" onclick="checkCode()">注册</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    function Register() {
        //ajax 请求后台注册校验
        let url = "/user/register";
        let params = {
            name: $("#username").val(),
            password: $("#password").val(),
            email: $("#email").val(),
            sex: $("#femaleRadio").val(),
        };
        console.log(params);

        httpPost(url, params, function (data) {
            //登录成功
            //登录成功，保存用户信息到浏览器缓存
            saveLoginUser(data);
            //跳转首页
            window.open("index.html");
        })
    }

    function sendMessages() {

        //ajax 请求后台注册校验
        let url = "/messages/getMessage";
        let params = "phone=" + $("#phone").val();
        console.log(params);
        httpGet(url, params, function (data) {
            //登录成功
            //登录成功，保存用户信息到浏览器缓存
        })

    }


    let btn = document.getElementById('sendMessage');
    let time = 60;   // 定义剩下的秒数
    btn.addEventListener('click', function () {
        btn.disabled = true;
        sendMessages();
        var timer = setInterval(function () {
            if (time == 0) {
                // 清除定时器和复原按钮
                clearInterval(timer);
                btn.disabled = false;
                btn.innerHTML = '发送';
                time = 60;   // 剩余时间需要从新开始
            }
            btn.innerHTML = time + '秒';
            time--;
        }, 1000);
    });

    function checkCode() {
        //ajax 请求后台注册校验
        let url = "/messages/checkMessage";
        let params = "phoneCode=" + $("#phoneCode").val();
        console.log(params);
        httpGet(url, params, function (data) {
            //登录成功
            Register()
            //登录成功，保存用户信息到浏览器缓存
        })

    }
</script>
</body>
</html>